<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<link href="./css/video-js.css" rel="stylesheet">
		<style type="text/css">
			#list {
				避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
				margin-top: -1px;
			}
			#refreshContainer{
				top:12.5rem;
				overflow: auto;
			}
			.mui-table-view-cell{
				line-height: 1.8rem;
			}
			.mui-table-view .mui-media-object{
				height: 60px;
				max-width: 120px;
			}
			.video-js{
				width: 100%;
				height: 200px;
			}
			.video-js .vjs-big-play-button{
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -0.75rem;
				margin-top: -0.3rem;
				transform: translate(-50%,-50%);
			} */
			.mui-ellipsis span{
				color: #0062CC;
			}
			.show_end{
				position: absolute;
				right: 30px;
				bottom: 1px;
				font-size: 12px;
			}
			.show_time{
				position: absolute;
				bottom: 1px;
				font-size: 12px;
			}
			.mui-table-view-chevron .mui-table-view-cell>a:not(.mui-btn){
				margin-right: -85px;
			}
			.mui-progressbar{
				left:32px;
			}
			.mui-content .mui-media-body .mui-ellipsis{
				margin-top: -5px;
				margin-bottom: 5px;
			}
			.hidden_videoJs{
				width: 100%;
				height: 200px;
				z-index: 999999;
				position: absolute;
				top: 0;
				display: none;
				
			}
			.hidden_videoJs_icon{
				width: 100%;
				height: 200px;
				z-index: 999999;
				position: absolute;
				top: 0;
				/* display: none;
				/* background: #000;
				opacity: 0.7;
				pointer-events: none;
			}
			.ssss{
				z-index: 999999;
				position: absolute;
				top: 50%;
				left: 50%;
				width: 60px;
				height: 60px;
				background-image: url('./img/播放(1.png');
				pointer-events: none;
				margin-top: -30px;
				margin-left: -30px;
				background-size: cover;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div>
				<div class='hidden_videoJs'></div>
				<!-- <div class='hidden_videoJs_icon'>
					<div class="ssss"></div>
				</div> -->
				<video webkit-playsinline="true" playsinline="true" 
				width="100%" height="240px" id='example-video' class="video-js vjs-big-play-centered" 
				x5-playsinline="true" controls>
				<source class='src_video' 
				src="xxx"
				type="application/x-mpegURL"> 
				</video>
			</div>
			<!--下拉刷新容器-->
			<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view mui-table-view-chevron" id='tvList'>
					<p>暂无数据</p>
					</ul>	
				
			</div>
			</div>
			
		</div>
		
		<script src="./js/mui.min.js"></script>
		<script src="./js/video.js"></script>
		<script src="./js/videojs-contrib-hls.min.js"></script>
		<script>


	window.onload=function(){
		 // alert(window.nativePlayVideo)
        var idFun = GetRequest();

        if(idFun['username'] && idFun['username'].length>0){

            setCookie('weixin_username',idFun['username']);
        }
        if(idFun['headerimg'] && idFun['headerimg'].length>0){

            setCookie('weixin_headerimg',idFun['headerimg']);
        }


        //写cookies

        function setCookie(name,value)
        {
            var Days = 30;
            var exp = new Date();
            exp.setTime(exp.getTime() + Days*24*60*60*1000);
            document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString()+";path=/;";
        }
        // 获取用户信息
        function GetRequest() {
            var url = location.search; //获取url中"?"符后的字串
            var theRequest = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                var strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = decodeURIComponent(strs[i].split("=")[1]);
                }
            }
            return theRequest;
        }
		document.getElementsByClassName("hidden_videoJs")[0].addEventListener('click', function () {
			console.log(313123)
		    var url = document.getElementsByClassName("hidden_videoJs")[0].getAttribute('data-url');
			if(window.android){
				window.android.nativePlayVideo(url);
			}else{
				window.nativePlayVideo(url);
			}
		});
		mui(".mui-content").on("tap",'.vjs-control',function (e) {
			console.log(1111)
			e.stopPropagation()
			return false;
		});
		mui(".mui-content").on("tap",'#example-video',function (e) {
			console.log(222)
		})


	mui.init();

	getList();
	//下拉加载 
	function pullfreshs() {
	    getList();
	
	    mui('#refreshContainer').pullRefresh().endPulldownToRefresh(true);
	}
	// 上拉加载
	function upPullFresh() {
	    getList();
	    mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
	}
	function getList() {
	    var HTTP_URL = document.location.protocol + "//" + window.location.host;
		
	    mui.ajax(HTTP_URL + "/tvradio/Tv/tvList", {
	        data: {
	            index: 1,
	            page_size: 99999,
	            status: 2
	        },
	        dataType: 'json', //服务器返回json格式数据
	        type: 'get', //HTTP请求类型
	        success: function success(data) {
	            
	            var url = data.data.list[0].url
	            var posters = data.data.list[0].img;
	            var rtmp_url = data.data.list[0].rtmp_url;
					if(window.nativePlayVideo||window.android) {
						var ccc = document.getElementsByClassName('hidden_videoJs')[0];
						ccc.style.display = 'block';
						ccc.setAttribute('data-url', rtmp_url);
						ccc.style.backgroundImage = "url("+posters+")"
					}else{
						videojs('example-video').ready(function () {
							var myPlayer = this;
							myPlayer.src(url);
							// myPlayer.load('http://pili-live-hls.conglan.top/tvradiotest/hks.m3u8');
							myPlayer.poster(posters);
							// myPlayer.play()
						});
					}
						
	
	            var str = '';
	            if (data.code === 200) {
	                data.data.list.map(function (item, index) {
	                    var end_time = '23:59';
	                    if (item.end_time) {
	                        end_time = DateChange(item.end_time);
	                    }
	                    if (item.now_tv_program_name) {
	                        str += "<li class=\"mui-table-view-cell mui-media\" data_url='tvDetail.html?tv_id=" + item.tv_id + "'>\n                                    <a href=\"javascript:;\">\n                                        <img class=\"mui-media-object mui-pull-left\" src=\"" + item.img + "\">\n                                        <div class=\"mui-media-body\">\n                                            " + item.tv_name + "\n                                        <p class='mui-ellipsis'>\u6B63\u5728\u76F4\u64AD:<span>" + item.now_tv_program_name + "</span></p>\n                                        <p class='show_time'>" + DateChange(item.start_time) + "</p><p class='show_end'>" + end_time + "</p>\n                                        <div id=\"demo" + index + "\" class=\"mui-progressbar\">\n                                            <span></span>\n                                        </div>\n                                        </div>\n                                    </a>\n                                </li>";
	                    } else {
	                        str += "<li class=\"mui-table-view-cell mui-media\" data_url='tvDetail.html?tv_id=" + item.tv_id + "'>\n                                    <a href=\"javascript:;\">\n                                        <img class=\"mui-media-object mui-pull-left\" src=\"" + item.img + "\">\n                                        <div class=\"mui-media-body\">\n                                            " + item.tv_name + "\n                                            <p class='mui-ellipsis'>\u6682\u65E0\u76F4\u64AD</p>\n                                        </div>\n                                    </a>\n                                </li>";
	                    }
	                });
	                var ul = document.getElementById('tvList');
	                ul.innerHTML = str;
	                var timestamp = Date.parse(new Date()) / 1000;
	                data.data.list.map(function (item, index) {
	                    if (item.now_tv_program_name) {
	                        if (!item.end_time) {
	                            item.end_time = Date.parse(new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)) / 1000;
	                        }
	                        var prog = parseInt((timestamp - item.start_time) / (item.end_time - item.start_time) * 100);
	                        mui("#demo" + index).progressbar({ progress: prog }).show();
	                    }
	                });
	            }
	        }
	    });
	}
	// 播放
	mui(".mui-table-view").on('tap', '.mui-table-view-cell', function () {
	    var ul = mui(this)[0];
	    window.location.href = ul.getAttribute('data_url');
	});
	
	//时间转换 
	function DateChange(timestamp) {
	    if (timestamp) {
	        if (timestamp.toString().length > 10) {
	            var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
	        } else {
	            var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
	        }
	    } else {
	        var date = new Date();
	    }
	    var Y = date.getFullYear() + '-';
	    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
	    var D = date.getDate() + ' ';
	    var h = date.getHours() + ':';
	    var m = date.getMinutes();
	    var s = date.getSeconds();
	    // return Y+M+D+h+m+s;
	    return h + m;
	}
	
	}
		
	
		</script>
	</body>

</html>